<!-- 跳蚤市场首页 -->
<template>
  <view class="container">
    <!-- 顶部 -->
    <view class="header" :style="{'padding-top':Height}">
     <view class="img">
     	<image
     	  @click="back"
     	  src="https://community.chuangxiangdianli.com/images/neighborimg/market/er_back.png"
     	  mode=""
     	></image>
     </view>
      <input
        type="text"
        placeholder="查找你感兴趣的话题"
        v-model="searchText"
		disabled
		@click="go_home_search"
      />
    </view>
    <!-- 轮播图区域 -->
    <view class="banner" :style="{'margin-top':Height}">
      <u-swiper
        :autoplay="false"
        :list="swiper_list"
        height="345"
        style="margin-bottom: 54rpx"
        effect3d-previous-margin="40"
        effect3d
      ></u-swiper>
      <!-- 分类 -->
      <view class="types">
        <template v-for="item in type_list">
          <view class="type-item" :key="item.id" @click="go_search">
            <image :src="item.url" mode=""></image>
            <text>{{ item.title }}</text>
          </view>
        </template>
      </view>
    </view>
    <!-- 轮播图下面就 -->
    <view class="banner-bottom">
      <view @click="go_search">
        <view> 优质平台 </view>
        <view> 让你轻松淘好物 </view>
        <view> 快去淘 >> </view>
        <view>
          <image
            src="https://community.chuangxiangdianli.com/images/neighborimg/market/er_1.png"
            mode=""
          ></image>
        </view>
      </view>
      <view>
        <view>
          <view @click="go_send_unused">
            <view> 发布闲置 </view>
            <view> 挣点小钱 </view>
          </view>
          <view>
            <image
              src="https://community.chuangxiangdianli.com/images/neighborimg/market/er_2.png"
              mode=""
            ></image>
          </view>
        </view>
        <view @click="go_search">
          <view>
            <view> 超级实惠 </view>
            <view> 价格低到不敢想 </view>
            <view> 推荐好物 </view>
          </view>
          <view>
            <image
              src="https://community.chuangxiangdianli.com/images/neighborimg/market/er_3.png"
              mode=""
            ></image>
          </view>
        </view>
      </view>
    </view>
    <!-- 推荐商品 -->
    <view class="recommend">
      <view class="recommend-title">
        <view> 推荐商品 </view>
        <view @click="go_search">
          <text>更多</text>
          <image src="https://community.chuangxiangdianli.com/images/loginImg/you.png" mode=""></image>
        </view>
      </view>
      <view class="recommend-list">
        <template v-for="item in list">
          <view class="recommend-item" :key="item.id" @click="go_goods_detail(item.id)">
            <view class="img" v-show="item.goods_images.length>0">
				<image :src="item.goods_images[0]" mode=""></image>
			</view>
            <view class="name">
              {{ item.goods_name }}
            </view>
            <view class="bottom">
              <view class="price"> ￥ {{ item.goods_price }} </view>
              <view class="type">
                {{ item.type_text }}
              </view>
            </view>
          </view>
        </template>
      </view>
    </view>
    <!-- 底部的tabbar -->
    <market-tab-bar :activeIndex="bottom_tab_bar_index" />
	<u-loadmore :status="status" />
  </view>
</template>
<!-- js -->
<script>
// 引入封装的请求
import request from '@/utils/request.js'	
import MarketTabBar from "../common/MarketTabBar/index.vue";
export default {
  components: {
    MarketTabBar
  },
  data() {
    return {
		Height:'25px',
      // 头部搜索的文字
      searchText: "",
      // 底部导航的高亮索引
      bottom_tab_bar_index: "0",
      // 轮播图列表
      swiper_list: [],
      // 分类
      type_list: [
        {
          id: 1,
          title: "每日上新",
          url: "https://community.chuangxiangdianli.com/images/neighborimg/market/er_home_1.png",
        },
        {
          id: 2,
          title: "学习资料",
          url: "https://community.chuangxiangdianli.com/images/neighborimg/market/er_home_2.png",
        },
        {
          id: 3,
          title: "生活日用",
          url: "https://community.chuangxiangdianli.com/images/neighborimg/market/er_home_3.png",
        },
        {
          id: 4,
          title: "全部分类",
          url: "https://community.chuangxiangdianli.com/images/neighborimg/market/er_home_4.png",
        },
      ],
      // 推荐商品列表
      list: [],
	  // 当前页码
	  pageNo:1,
	  // 当前的数据条数
	  limit:10,
	  // 是否正在请求数据
	  is_loading:false,
	  // 是否请求完数据
	  is_bottom:false,
	  // 底部正在加载中
	  status: 'loadmore',
    };
  },
  computed: {},
  watch: {},
  onLoad() {
	  let Height = uni.getSystemInfoSync().statusBarHeight
	  this.Height = Height + 'px'
	  console.log(Height)
  },
  onShow() {
	  this.get_recommend_list()
	  // 获取轮播图
	  this.get_banner()
  },
  // 页面底部加载
  onReachBottom(){
  	let that = this
  	this.status = 'loading';
  	// console.log(11111)
  	if(that.status = 'nomore' || that.is_loading){
  		return false
  	}
  	this.pageNo++
  	setTimeout(() => {
  		that.get_recommend_list(true)
  	}, 1000)
  },
  methods: {
    // 返回上一页
    back() {
      uni.navigateBack();
    },
	// 前往搜索商品列表页面
	go_search(){
		uni.navigateTo({
			url:'./search/index'
		})
	},
	// 前往首页搜索页
	go_home_search(){
		uni.navigateTo({
			url:'./home/search'
		})
	},
    // 前往发布限制
    go_send_unused() {
      uni.navigateTo({
        url: "/neighbor/market/send_unused/index",
      });
    },
    // 改变底部tabbar
    chang_bottom_tab(i) {
      this.bottom_tab_bar_index = "" + i;
      // console.log(this.bottom_tab_bar_index)
    },
    // 前往商品详情
    go_goods_detail(id) {
      uni.navigateTo({
        url: "/neighbor/market/goodsInfo/index?id="+id,
      });
    },
	// 获取顶部轮播图
	get_banner(){
		let that = this
		request.get('Mini/Estate/flea_banner').then(res=>{
			if(res.code==200){
				console.log(res)
				let arr = JSON.parse(JSON.stringify(res.data))
				arr.forEach(v=>{
					let url = v.image_url
					that.swiper_list.push({
						...v,
						image:url
					})
				})
			}else{
				uni.showToast({
					title:res.msg
				})
			}
		})
	},
	// 推荐商品列表
	get_recommend_list(turn){
		let that = this
		that.is_loading = true
		request.get('wechat/getFleaGoods',{
			page:that.pageNo,
			pre_page:that.limit,
			type:2
		}).then(res => {
			console.log('首页数据', res)
			that.is_loading = false
			if (res.code==200) {
				if(turn){
					if(res.data.data.length>0){
						that.list = [
							...that.list,
							...res.data.data
						]
					}
				}else{
					that.list = res.data.data
				}
				
				if(res.data.total==that.list.length){
					// that.is_boottom = true
					that.status = 'nomore';
				}
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
		}).catch(res => {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		})
	}
  },
};
</script>
<!-- css -->
<style lang="scss" scoped>
.container {
  width: 100vw;
  // height: 100vh;
  background-color: #f3f5f8;
  box-sizing: border-box;
  font-family: PingFang SC;
  padding-bottom: 100rpx;
  overflow: auto;
  .header {
    width: 100%;
    // height: 82rpx;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-left: 17rpx;
    background-color: #ffffff;
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
    &>view{
		width: 50rpx;
		height: 60rpx;
		display: flex;
		align-items:center;
		justify-content: center;
		margin-right: 42rpx;
		image {
		  width: 34rpx;
		  height: 34rpx;
		}
	}
    input {
      width: 380rpx;
      height: 60rpx;
      background: #ededed;
      border-radius: 30rpx;
      text-align: center;
    }
  }
  .banner {
    width: 100%;
    background-color: #ffffff;
    padding-top: 80rpx;
    padding-bottom: 37rpx;
    margin-bottom: 18rpx;
    // 轮播图未选中样式
    /deep/.u-indicator-item-round.data-v-a5b2d580 {
      background-color: rgba(255, 255, 255, 0);
      border: 2rpx solid #333333;
      width: 12rpx;
      height: 12rpx;
    }
    /deep/.u-indicator-item-round-active.data-v-a5b2d580 {
      width: 28rpx !important;
      border-radius: 5rpx;
      background-color: #ffa809 !important;
    }
    /deep/.u-list-image-wrap.data-v-a5b2d580 {
      transform: scaleY(1) !important;
    }
    .types {
      margin-top: 54rpx;
      width: 100%;
      box-sizing: border-box;
      padding: 0 30rpx;
      display: flex;
      align-items: center;
      .type-item {
        margin-right: 92rpx;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        & > image {
          width: 60rpx;
          height: 60rpx;
          margin-bottom: 24rpx;
        }
        & > text {
          display: inline-block;
          font-size: 26rpx;
          font-weight: 500;
          color: #333333;
        }
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
  .banner-bottom {
    width: 750rpx;
    height: 419rpx;
    background-color: #ffffff;
    padding: 16rpx 24rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    & > view:nth-child(1) {
      width: 351rpx;
      height: 388rpx;
      background: rgba(236, 247, 255, 0.5);
      border-radius: 5rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;
      padding-top: 30rpx;
      & > view {
        margin: 0 auto;
        &:nth-child(1) {
          margin-bottom: 19rpx;
          font-size: 30rpx;
          font-family: Hiragino Sans GB;
          font-weight: bold;
          color: #333333;
        }
        &:nth-child(2) {
          margin-bottom: 23rpx;
          font-size: 24rpx;
          font-family: Hiragino Sans GB;
          font-weight: bold;
          color: #be1e2c;
        }
        &:nth-child(3) {
          margin-bottom: 63rpx;
          width: 144rpx;
          height: 40rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #e73a1e;
          border-radius: 20rpx;
          font-size: 26rpx;
          font-family: Hiragino Sans GB;
          font-weight: normal;
          color: #ffffff;
        }
        &:nth-child(4) {
          width: 219rpx;
          height: 133rpx;
          & > image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    & > view:nth-child(2) {
      & > view {
        width: 346rpx;
        background: rgba(236, 247, 255, 0.5);
        border-radius: 5rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        &:nth-child(1) {
          height: 194rpx;
          & > view:nth-child(1) {
            margin-left: 77rpx;
            & > view:nth-child(1) {
              font-size: 30rpx;
              color: #333333;
              font-family: HiraginoSansGB-W3;
              font-weight: bold;
              margin-bottom: 24rpx;
            }
            & > view:nth-child(2) {
              font-size: 24rpx;
              font-family: HiraginoSansGB-W3;
              font-weight: bold;
              color: #999999;
            }
          }
          & > view:nth-child(2) {
            width: 128rpx;
            height: 142rpx;
            image {
              width: 100%;
              height: 100%;
            }
          }
        }
        &:nth-child(2) {
          height: 189rpx;
          margin-top: 4rpx;
          & > view:nth-child(1) {
            & > view:nth-child(1) {
              font-size: 26rpx;
              font-family: Hiragino Sans GB;
              font-weight: bold;
              color: #333333;
              margin-bottom: 19rpx;
            }
            & > view:nth-child(2) {
              font-size: 22rpx;
              font-family: Hiragino Sans GB;
              font-weight: normal;
              color: #999999;
              margin-bottom: 17rpx;
            }
            & > view:nth-child(3) {
              width: 90rpx;
              height: 31rpx;
              background: #cdb58f;
              border-radius: 3px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 18rpx;
              font-family: Hiragino Sans GB;
              font-weight: normal;
              color: #ffffff;
            }
          }
          & > view:nth-child(2) {
            width: 129rpx;
            height: 108rpx;
            align-self: flex-end;
            margin-bottom: 19rpx;
            image {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
  .recommend {
    width: 100%;
    .recommend-title {
      width: 100%;
      height: 90rpx;
      margin-top: 16rpx;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 25rpx;
      & > view:nth-child(1) {
        font-size: 30rpx;
        font-family: Hiragino Sans GB;
        font-weight: bold;
        color: #333333;
      }
      & > view:nth-child(2) {
        font-size: 26rpx;
        font-family: Hiragino Sans GB;
        font-weight: normal;
        color: #999999;
        display: flex;
        align-items: center;
        & > image {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }
    .recommend-list {
      margin-top: 15rpx;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      width: 100%;
      box-sizing: border-box;
      padding: 0 22rpx;
      .recommend-item {
        width: 340rpx;
        padding-bottom: 17rpx;
        border-radius: 10px;
        background-color: #ffffff;
        margin-right: 22rpx;
		margin-bottom: 30rpx;
        &:nth-child(2n) {
          margin-right: 0;
        }
        .img {
          width: 340rpx;
          height: 360rpx;
        }
        .name {
          width: 100%;
          padding: 0 9rpx;
          box-sizing: border-box;
          margin-top: 18rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          height: 78rpx;
        }
        .bottom {
          width: 100%;
          padding: 0 9rpx;
          margin-top: 20rpx;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .price {
            font-size: 30rpx;
            font-family: Hiragino Sans GB;
            font-weight: bold;
            color: #b83d42;
          }
          .type {
            min-width: 83rpx;
            height: 27rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #333333;
            border-radius: 3rpx;
            font-size: 18rpx;
            font-family: Hiragino Sans GB;
            font-weight: bold;
            color: #fefefe;
          }
        }
      }
    }
  }
}
</style>
